<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible="true"
      :close-on-click-modal="false"
      @close="closeDialog"
      width="900px"
      :modal-append-to-body="false"
      :close-on-press-escape="false"
      class="dialogForm"
      :append-to-body="true"
    >
      <el-form :model="info" :rules="rules" ref="formData" label-width="170px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="案件来源" prop="source">
              <el-input
                v-model="info.source"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上访人数" prop="petitionNum">
              <el-input
                v-model="info.petitionNum"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input
              >人
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接件日期">
              <el-date-picker
                v-model="info.receiveDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接件处室" prop="receiveUnit">
              <el-input
                v-model="info.receiveUnit"
                clearable=""
                placeholder="请输入接件处室"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="金额" prop="money">
              <el-input
                v-model="info.money"
                clearable=""
                placeholder="请输入"
                class="caseCompTitleInput"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              label="案情简要"
              class="row-padding-bottom"
              prop="caseBrief"
            >
              <el-input
                type="textarea"
                placeholder="请输入"
                v-model="info.caseBrief"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="caseCompBtn" slot="footer">
        <el-button
          type="primary"
          v-sdc
          :loading="isSaveLoading"
          class="commonBut saveBtn"
          @click="save"
          >保存</el-button
        >
        <el-button type="default" v-sdc class="commonBut" @click="finish"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'suddencase',
  props: {
    dialogTitle: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: '',
    },
  },
  data() {
    // var checkDate = (rule, value, callback) => {
    //     var guaranteeStartDate = this.info.effectiveStartDate;
    //     var guaranteeEndDate = this.info.effectiveEndDate;
    //     if (!guaranteeEndDate) {
    //         return callback(new Error("列入日期不能为空"));
    //     } else if (guaranteeStartDate > guaranteeEndDate) {
    //         return callback(new Error("退出日期不能小于列入日期"));
    //     } else {
    //         callback();
    //     }
    // };
    var checkMoney = (rule, value, callback) => {
      var reProjectCost =
        /^(([0]|[1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
      if (!reProjectCost.test(value)) {
        callback(new Error('金额格式不正确,必须大于或等于0,最多带有2位小数'))
      } else {
        callback()
      }
    }
    return {
      isSaveLoading: false,
      info: {
        source: '',
        caseBrief: '',
        petitionNum: '',
        receiveDate: '',
        receiveUnit: '',
        money: '',
      },
      caseStatusArr: [
        { name: '办结', id: '1' },
        { name: '待办', id: '2' },
      ],
      rules: {
        source: [{ max: 20, message: '最多输入20个字', trigger: 'blur' }],
        caseBrief: [{ max: 200, message: '最多输入200个字', trigger: 'blur' }],
        receiveUnit: [{ max: 50, message: '最多输入200个字', trigger: 'blur' }],
        // receiveDate: [
        //     { message: '请选择接件日期', trigger: 'change',required: true }
        // ],
        // industryName: [
        //     {message: '请选择所属行业', trigger: 'change',required: true}
        // ],
        petitionNum: [
          {
            pattern: /^\+?[1-9]\d*$/,
            message: '请输入正整数',
            trigger: 'blur',
          },
        ],
        money: [{ validator: checkMoney, trigger: 'blur' }],
      },
    }
  },
  watch: {},
  mounted() {
    this.getDetail(this.id)
  },
  methods: {
    getDetail(id) {
      this.axios
        .get('api-r/otherComplaint/detail?id=' + id)
        .then((res) => {
          if (!res.data.hasError) {
            const {
              source,
              caseBrief,
              receiveDate,
              receiveUnit,
              petitionNum,
              money,
            } = res.data.result
            var formatReceiveDate
            if (receiveDate) {
              formatReceiveDate = common.GMTFormat(receiveDate, 1)
            } else {
              formatReceiveDate = receiveDate
            }
            this.info = {
              source,
              caseBrief,
              receiveUnit,
              petitionNum,
              money,
              receiveDate: formatReceiveDate,
            }
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
    closeDialog() {
      this.finish()
    },
    save() {
      let params = this.info
      let url = ''
      if (this.id) {
        params.id = this.id
        url = 'api-r/otherComplaint/modify'
      }
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.axios.post(url, params).then((res) => {
            this.isSaveLoading = false
            if (!res.data.hasError) {
              this.$message.success('保存成功')
              this.finish(1)
            } else {
              this.$message.warning(res.data.errorMsg)
            }
          })
        } else {
          return false
        }
      })
    },
    finish(index) {
      this.$refs.formData.resetFields()
      this.$emit('callback', { success: index == 1 ? true : false })
    },
  },
}
</script>

<style scoped lang="less">
/deep/.el-input {
  width: 230px;
}
/deep/.el-dialog__footer {
  height: 75px !important;
  padding: 20px !important;
  .commonBut {
    width: 90px;
  }
}
</style>
